<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header"><span>统计分析</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%">
              <tbody>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">评分详情</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">平均评分：{{value}}分</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="statistics.score5 != 0">五星评分：{{statistics.score5}}人</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="statistics.score4 != 0">四星评分：{{statistics.score4}}人</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="statistics.score3 != 0">三星评分：{{statistics.score3}}人</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="statistics.score2 != 0">二星评分：{{statistics.score2}}人</div></td>
                <td class="el-table__cell is-leaf"><div class="cell" v-if="statistics.score1 != 0">一星评分：{{statistics.score1}}人</div></td>
              </tr>
              <tr>
                <td class="el-table__cell is-leaf"><div class="cell">订单详情</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">订单总量：{{statistics.completeOrder + statistics.outstandingOrder}}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">完成数量：{{statistics.completeOrder}}</div></td>
                <td class="el-table__cell is-leaf"><div class="cell">未完成量：{{statistics.outstandingOrder}}</div></td>
              </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card style="height: 350px">
          <div slot="header">
            <span>评分统计</span>
          </div>
          <el-row>
            <el-col :span="10" >
              <el-rate
                v-model="value"
                disabled
                show-score
                text-color="#ff9900">
              </el-rate>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-rate
                v-model="value5"
                disabled
                text-color="#ff9900">
              </el-rate>
            </el-col>
            <el-col :span="10">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="score5"></el-progress>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-rate
                v-model="value4"
                disabled
                text-color="#ff9900">
              </el-rate>
            </el-col>
            <el-col :span="10">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="score4"></el-progress>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-rate
                v-model="value3"
                disabled
                text-color="#ff9900">
              </el-rate>
            </el-col>
            <el-col :span="10">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="score3"></el-progress>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-rate
                v-model="value2"
                disabled
                text-color="#ff9900">
              </el-rate>
            </el-col>
            <el-col :span="10">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="score2"></el-progress>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-rate
                v-model="value1"
                disabled
                text-color="#ff9900">
              </el-rate>
            </el-col>
            <el-col :span="10">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="score1"></el-progress>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>订单完成度统计</span></div>
          <div ref="orderState" style="height: 250px" />
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>工单统计</span>
          </div>
          <div ref="commandstats" style="height: 300px" />
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import { getStatistics } from "@/api/bysj/statistics";
import echarts from "echarts";

export default {
  name: "Statics",
  data() {
    return {
      value5: 5,
      value4: 4,
      value3: 3,
      value2: 2,
      value1: 1,
      value: null,
      score5: null,
      score4: null,
      score3: null,
      score2: null,
      score1: null,
      commandstats: null,
      completeOrder: null,
      orderState: null,
      outstandingOrder: null,
      endDate: [],
      orderNum: [],
      statistics: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getStatistics().then((response) =>{
        this.statistics = response.data;
        this.value =response.data.averageScore;
        this.score5 = Math.round((response.data.score5/response.data.scoreNum)*100);
        this.score4 = Math.round((response.data.score4/response.data.scoreNum)*100);
        this.score3 = Math.round((response.data.score3/response.data.scoreNum)*100);
        this.score2 = Math.round((response.data.score2/response.data.scoreNum)*100);
        this.score1 = Math.round((response.data.score1/response.data.scoreNum)*100);
        this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
        this.commandstats.setOption({
          legend: {
            data: ['订单数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: response.data.endDate
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '完成订单',
              type: 'line',
              stack: 'Total',
              data: response.data.orderNum
            }
          ]
        });

        this.orderState = echarts.init(this.$refs.orderState, "macarons");
        this.orderState.setOption({
          /*toolbox: {
            show: true,
          },
          series: [
            {
              name: 'Nightingale Chart',
              type: 'pie',
              radius: [50, 100],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: [
                { value: response.data.completeOrder, name: '已完成' },
                { value: response.data.outstandingOrder, name: '未完成' },
              ]
            }
          ]*/
         /* title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
          },*/
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '70%',
              data: [
                { value: response.data.completeOrder, name: '已完成' },
                { value: response.data.outstandingOrder, name: '未完成' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      });

    }
  }
};
</script>
